<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器基础学习</title>
    <style>
        /* 1. 元素选择器 */
        p {
            color: blue;
        }

        /* 2. 类选择器 */
        .highlight {
            background-color: yellow;
        }

        .important {
            color: red;
            font-weight: bold;
        }

        /* 3. ID选择器 */
        #unique-title {
            color: green;
            font-size: 24px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }

        #special-note {
            background-color: #f0f0f0;
            padding: 10px;
            border-left: 1px solid #ccc;
        }

        /* 4. 组合选择器 */
        /* 后代选择器（空格）：选择 .container 内的所有 p 元素 */
        .container p {
            margin: 10px;
            padding: 5px;
        }

        /* 子元素选择器（>）：只选择 .container 的直接子 p 元素 */
        .container > p {
            border: 1px solid #ddd;
        }

        /* 相邻兄弟选择器（+）：选择紧跟在 h2 后面的 p 元素 */
        h2 + p {
            font-style: italic;
        }

        /* 通用兄弟选择器（~）：选择 h2 后面的所有 p 元素 */
        h2 ~ p {
            text-indent: 20px;
        }

        /* 5. 属性选择器 */
        /* 选择有 target 属性的元素 */
        [target] {
            border: 2px solid orange;
        }

        /* 选择 type="text" 的输入框 */
        input[type="text"] {
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 4px;
        }

        /* 选择 href 属性以 ".pdf" 结尾的链接 */        
        a[href$=".pdf"] {
            color: green;
            text-decoration: none;
        }

        /* 选择 href 属性以 "https://" 开头的链接 */
        a[href^="https://"] {
            color: blue;
            font-weight: bold;
        }

         /* 选择 class 属性包含 "btn" 的元素 */       
        [class^="btn-"] {
            background-color: #4CAF;
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 4px;
        }

        /* 6. 伪类选择器 */
        /* 鼠标悬停状态 */
        .btn-primary:hover {
            background-color: #4CAF50;
            color: white;
        }
        /* 输入框获得焦点状态 */
        input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
        }
        /* 未访问的链接 */        
        .links a:link {
            color: #0066cc;
            text-decoration: none;
        }
        .links a:visited {
            color: #551A8B;
        }

        /* 最后一个元素 */        
        .container p:last-child {
            margin-bottom: 50px;
        }

        /*第一个元素*/
        .list li:first-child {
            color: red;
        }
        /*最后一个元素*/
        .list li:last-child {
            color: green;
        }
        /*偶数元素*/
        .list li:nth-child(2) {
            color: blue;
        }

        /* 7. 伪元素选择器 */
        /* 在元素之前添加内容 */
        .quote::before {
            content: "“";
            font-size: 24px;
        }
        /* 在元素之后添加内容 */
        .quote::after {
            content: "”";
            font-size: 24px;
        }

        .paragraph::first-line {
            font-weight: bold;
        }
        .paragraph::first-letter {
            font-size: 36px;
            color: red;
        }

        ::selection {
            background-color: #f0f0f0;
            color: #5a6e23;
        }
        
    </style>
</head>
<body>
    <h1 id="unique-title">选择器学习示例</h1>

    <div class="container">
        <h2>组合选择器示例</h2>
        <p>这是紧跟在h2后面的段落，会变成斜体。</p>
        <div>
            <p>这是container内的深层段落，只会被后代选择器选中。</p>
        </div>
        <p>这是container直接子元素的段落，会有边框。</p>
        <p>这也是h2后面的段落，会有缩进。</p>
    </div>

    <p>这是普通段落，只会变成蓝色。</p>
    <p class="highlight">这是高亮段落，会有黄色背景。</p>
    <p class="important">这是重要段落，会变成红色和粗体。</p>
    <p class="highlight important">这个段落同时使用两个类，会同时具有高亮和重要的样式。</p>

    <p id="special-note">这是一个特殊说明，使用ID选择器设置样式。记住：ID在页面中必须是唯一的！</p>

    <div class="container">
        <h2>属性选择器示例</h2>
        
        <!-- 表单元素示例 -->
        <div class="form-group">
            <input type="text" placeholder="普通文本输入框">
            <input type="password" placeholder="密码输入框">
        </div>

        <!-- 链接示例 -->
        <div class="links">
            <a href="https://www.example.com">HTTPS链接</a><br>
            <a href="document.pdf">PDF文档链接</a><br>
            <a href="http://example.com" target="_blank">新窗口打开的链接</a>
        </div>

        <!-- 按钮示例 -->
        <div class="buttons">
            <button class="btn-primary">主要按钮</button>
            <button class="btn-secondary">次要按钮</button>
        </div>
    </div>

    <div class="container">
        <h2>伪类和伪元素选择器示例</h2>

        <!-- 伪类选择器示例 -->
        <div class="hover-example">
            <button class="btn-primary">悬停在我上面试试</button>
            <input type="text" placeholder="点击我试试焦点效果">
        </div>

        <ul class="list">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
            <li>第五项</li>
        </ul>

        <!-- 伪元素选择器示例 -->
        <p class="quote">这是一段带有引号装饰的文字</p>

        <p class="paragraph">这是一段用来展示first-line和first-letter效果的段落。
        这是第二行文本，可以看到第一行的效果。
        这是第三行文本。</p>

        <p>试试选中这段文字，看看选中效果。</p>
    </div>

</body>
</html>